<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Supply Chain System</title>
<base href="http://localhost/template/" />
<meta name="description" content="Supply Chain System" />
<meta name="keywords" content="Suply Chain System" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="javascript/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<link href="javascript/bootstrap/less/bootstrap.less" rel="stylesheet/less" />
<script src="javascript/bootstrap/less-1.7.4.min.js"></script>
<link href="javascript/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link href="javascript/summernote/summernote.css" rel="stylesheet" />
<script type="text/javascript" src="javascript/summernote/summernote.js"></script>
<script src="javascript/jquery/datetimepicker/moment.js" type="text/javascript"></script>
<script src="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<link href="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen" />
<link type="text/css" href="stylesheet/stylesheet.css" rel="stylesheet" media="screen" />
<script src="javascript/common.js" type="text/javascript"></script>
</head>
<body>
  <div id="container">
    <!-- HEADER //-->
    <header id="header" class="navbar navbar-static-top">
      <div class="navbar-header">
        <a type="button" id="button-menu" class="pull-left"><i class="fa fa-indent fa-lg"></i></a>
        <a href="#" class="navbar-brand"><img src="image/logo.png" alt="test" title="Home" /></a></div>
        <ul class="nav pull-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
              <span class="label label-danger pull-left">100</span> <i class="fa fa-bell fa-lg"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right alerts-dropdown">
              <li class="dropdown-header">Order</li>
              <li>
                <a href="#" style="display: block; overflow: auto;">
                  <span class="label label-warning pull-right">100</span>Orer Status
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-success pull-right">100</span>
                  Order Completed
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-danger pull-right">100</span>
                  Return
                </a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-header">Customer</li>
              <li>
                <a href="#">
                  <span class="label label-success pull-right">1000000</span>
                  Online
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-danger pull-right">2000000</span>
                    For Approval
                  </a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-header">Product</li>
              <li>
                <a href="#">
                  <span class="label label-danger pull-right">20000000</span>
                  Stock</a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-danger pull-right">1000</span>
                  Review
                </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-life-ring fa-lg"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li class="dropdown-header">Client <i class="fa fa-shopping-cart"></i></li>
              <li><a href="#" target="_blank">QBE</a></li>
              <li><a href="#" target="_blank">Sunlife</a></li>
              <li><a href="#" target="_blank">Nestle</a></li>
              <li><a href="#" target="_blank">Telus</a></li>
              <li><a href="#" target="_blank">[24]7</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Help <i class="fa fa-life-ring"></i></li>
              <li><a href="http://www.opencart.com" target="_blank">Homepage</a></li>
              <li><a href="http://docs.opencart.com" target="_blank">Documentation</a></li>
              <li><a href="http://forum.opencart.com" target="_blank">Support</a></li>
            </ul>
          </li>
          <li><a href="#"><span class="hidden-xs hidden-sm hidden-md">Logout</span> <i class="fa fa-sign-out fa-lg"></i></a></li>
        </ul>
    </header>
    <nav id="column-left">

      <!-- PROFILE !-->
      <div id="profile">
        <div><a class="dropdown-toggle" data-toggle="dropdown"><img src="" alt="Image" title="Image" class="img-circle" /></a></div>
        <div>
          <h4>Aimon Bio</h4>
          <small>Administrator</small>
        </div>
      </div>

      <!-- MENU !-->
      <ul id="menu">
        <li id="dashboard">
          <a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>
          Dashboard</span>
          </a>
        </li>
        <li id="catalog">
          <a class="parent">
            <i class="fa fa-tags fa-fw"></i> <span>Catalog</span>
          </a>
          <ul>
            <li><a href="#">Category</a></li>
            <li><a href="#">Product</a></li>
            <li><a class="parent">Attribute</a>
              <ul>
                <li><a href="#">Attribute</a></li>
                <li><a href="#">Attribute Group</a></li>
              </ul>
            </li>
            <li><a href="#">Option</a></li>
            <li><a href="#">Menu</a></li>
          </ul>
        </li>
        <li id="extension"><a class="parent"><i class="fa fa-puzzle-piece fa-fw"></i> <span>Extension</span></a>
          <ul>
            <li><a href="#">Installer</a></li>
            <li><a class="parent">Openbay</a>
              <ul>
                <li><a href="#">Openbay Dashboad</a></li>
                <li><a class="parent">ebay</a>
                  <ul>
                    <li><a href="#">ebay Dashboard</a></li>
                    <li><a href="#">ebay Dashboard 2</a></li>
                  </ul>
                </li>
            </li>
          </ul>
        </li>
        <li id="sale"><a class="parent"><i class="fa fa-shopping-cart fa-fw"></i> <span>Sale</span></a>
          <ul>
            <li><a href="#">Order</a></li>
            <li><a href="#">Recurring</a></li>
            <li><a class="parent">Customer</a>
              <ul>
                <li><a href="#">Customer</a></li>
                <li><a href="#">Customer Group</a></li>
              </ul>
            </li>
            <li><a class="parent">Voucher</a>
              <ul>
                <li><a href="#">Voucher</a></li>
                <li><a href="#">Voucher Theme</a></li>
              </ul>
            </li>
            <li><a class="parent">PayPal</a>
              <ul>
                <li><a href="#">PayPal Search</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a class="parent"><i class="fa fa-share-alt fa-fw"></i> <span>Marketing</span></a>
          <ul>
            <li><a href="#>">Marketing</a></li>
          </ul>
        </li>
        <li id="system"><a class="parent"><i class="fa fa-cog fa-fw"></i> <span>System</span></a>
          <ul>
            <li><a href="#">Setting</a></li>
            <li><a class="parent">Design</a>
              <ul>
                <li><a href="#">Layout</a></li>
              </ul>
            </li>

          </ul>
        </li>
        <li id="tools"><a class="parent"><i class="fa fa-wrench fa-fw"></i> <span>Tools</span></a>
          <ul>
            <li><a href="#">Upload</a></li>
            <li><a href="#">Backup</a></li>
            <li><a href="#">Error Log</a></li>
          </ul>
        </li>
        <li id="reports"><a class="parent"><i class="fa fa-bar-chart-o fa-fw"></i> <span>Reports</span></a>
          <ul>
            <li><a class="parent">Sale</a>
              <ul>
                <li><a href="#">Sales Order</a></li>
              </ul>
            </li>
            <li><a class="parent">Product</a>
              <ul>
                <li><a href="#">Product View</a></li>
              </ul>
            </li>

          </ul>
        </li>
      </ul>
      
      <!-- QUICK STATUS //-->
      <div id="stats">
        <ul>
          <li>
            <div>Complete Status <span class="pull-right">100%</span></div>
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">100%</span> </div>
            </div>
          </li>
          <li>
            <div>Processing <span class="pull-right">100%</span></div>
            <div class="progress">
              <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">100%</span> </div>
            </div>
          </li>
          <li>
            <div>100 <span class="pull-right">100%</span></div>
            <div class="progress">
              <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">100%</span> </div>
            </div>
          </li>
        </ul>
      </div>
    </nav>

    <!-- CONTENT //-->
    <div id="content">
      <div class="page-header">
        <div class="container-fluid">
          <div class="pull-right"><a href="#" data-toggle="tooltip" title="Add" class="btn btn-primary"><i class="fa fa-plus"></i></a>
            <button type="button" data-toggle="tooltip" title="Delete" class="btn btn-danger" onclick="confirm('Are You Sure?') ? alert('form submit') : false;"><i class="fa fa-trash-o"></i></button>
          </div>
          <h1>Supply Chain System</h1>
          <!-- BREADCRUMB //-->
          <ul class="breadcrumb">       
            <li><a href="#">Home</a></li>
            <li><a href="#">Catalog</a></li>
          </ul>
        </div>
      </div>
      <div class="container-fluid">
        <!-- WARNING MESSAGE //-->
        <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> This is warning
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
        
        <!-- SUCCESS MESSAGE //-->
        <div class="alert alert-success"><i class="fa fa-check-circle"></i> This is success message
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-list"></i> List </h3>
          </div>
          <div class="panel-body">
            <form action="#" method="post" enctype="multipart/form-data" id="form-filter">
              <div class="table-responsive">
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td style="width: 1px;" class="text-center"><input type="checkbox" onclick="" /></td>
                      <td class="text-left">
                        <a href="#" class="asc">Group</td>
                      <td class="text-right">Action</td>
                    </tr>
                  </thead>
                  <tbody>

                    <tr>
                      <td class="text-center">
                        <input type="checkbox" name="selected[]" value="" />
                      </td>
                      <td class="text-left">Group</td>
                      <td class="text-right"><a href="#" data-toggle="tooltip" title="Edit" class="btn btn-primary"><i class="fa fa-pencil"></i></a></td>
                    </tr>

                  </tbody>
                </table>
              </div>
            </form>
            <div class="row">
              <div class="col-sm-6 text-left">Pagination</div>
              <div class="col-sm-6 text-right">Results</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- FOOTER //-->
    <footer id="footer">Footer<br />Version</footer>
  </div>

</body>
</html>

